<template>
	<view class="bill">	

		<u-navbar
			title="账单详情"
			:border-bottom="false"  
		>
			<view class="navbar__right" slot="right">
				<view class="navbar__right__icon">
					<u-icon name="more-dot-fill" @click="bill__more"></u-icon>
				</view>

			</view>
		</u-navbar>
		
		<view class="bill__card">
			<view class="bill__card__top">
				<view class="bill__card__top__icon">
					<u-icon name="order" color="#177fff" size="50"></u-icon>
				</view>
				<view class="bill__card__top__number">{{bill.billNumber}}</view>
			</view>
<!-- 			<view class="bill__card__info" > 
				<view class="bill__card__info__name">园区ID</view>
				<view class="bill__card__info__value">{{bill.parkId}}</view>
			</view>
			
			<view class="bill__card__info" >
				<view class="bill__card__info__name">企业ID</view>
				<view class="bill__card__info__value">{{bill.enterpriseId}}</view>
			</view> -->
		
			<view class="bill__card__contents">
				<view class="bill__card__contents__title"> 账单信息</view>
				<view class="bill__card__contents__list" v-for="(billContent,index) in bill.billContents">
					<view class="bill__card__contents__list__info">
						<!-- <view class="bill__card__contents__list__info__name">费用名称</view> -->
						<view class="bill__card__contents__list__info__value">{{billContent.name}}</view>
					</view>
					
					<view class="bill__card__contents__list__amount">
						<view class="bill__card__contents__list__amount__box">
							<view class="bill__card__contents__list__amount__box__type">
								应付金额
							</view>
							<view class="bill__card__contents__list__amount__box__value">
								{{billContent.payableAmount}}
							</view>
						</view>
						
						<view class="bill__card__contents__list__amount__box">
							<view class="bill__card__contents__list__amount__box__type">
								减免
							</view>
							<view class="bill__card__contents__list__amount__box__value">
								{{billContent.reducedAmount}}
							</view>
						</view>
						
						<view class="bill__card__contents__list__amount__box">
							<view class="bill__card__contents__list__amount__box__type">
								实付金额
							</view>
							<view class="bill__card__contents__list__amount__box__value">
								{{billContent.actualAmount}}
							</view>
						</view>
					</view>
					
					<view class="bill__card__contents__list__detail">备注:{{billContent.detail}}</view>
				</view>
			</view>
			
			<view class="bill__card__amount">
				<view class="bill__card__amount__box">
					<view class="bill__card__amount__box__type">
						总计应付金额
					</view>
					<view class="bill__card__amount__box__value">
						{{bill.payableTotal}}
					</view>
				</view>
				
				<view class="bill__card__amount__box">
					<view class="bill__card__amount__box__type">
						总计减免
					</view>
					<view class="bill__card__amount__box__value">
						{{bill.reducedTotal}}
					</view>
				</view>
				
				<view class="bill__card__amount__box">
					<view class="bill__card__amount__box__type">
						总计实付金额
					</view>
					<view class="bill__card__amount__box__value">
						{{bill.actualTotal}}
					</view>
				</view>
			</view>
				
			<view class="bill__card__info" > 
				<view class="bill__card__info__name">收款日期</view>
				<view class="bill__card__info__value">{{bill.chargeDate}}</view>
			</view>
			
<!-- 			<view class="bill__card__info" >
				<view class="bill__card__info__name">支付凭证</view>
				<view class="bill__card__info__value">{{bill.paymentDocument}}</view>
			</view> -->
			
<!-- 			<view class="bill__card__delete">
				删除订单
			</view> -->
		</view>

	</view>
	
</template>

<script>
	import testData from './testData.js'
	export default {
		data() {
			return {
				curPage:1,
				pageSize:10,
				billNumber:"",
				startData:"",
				endData:"",
				bill:{},
				// keyList:[]
			}
		},

		onLoad(option){
			// let billNumber=option.billNumber;
			// let querydata={
			// 	curPage:this.curPage,
			// 	pageSize:this.pageSize,
			// 	billNumber:this.billNumber,
			// 	startData:this.startData,
			// 	endData:this.endData,
			// }
			// this.$Axis({
			// 	method:"post",
			// 	url:this.$store.state.baseURL+"/bill/query",
			// 	data:querydata,
			// }).then((response)=>{
			// 	if(response.data.state=="SUCCESS"){
			// 		this.bill=response.data.msg.data[0];
			// 	}
			// })
			
			// 测试数据
			this.bill=this.$Route.query.bill
			// this.keyList=testData.billContent.keys
			console.log(this.bill)
		},
		methods: {
			getBillList(){
				let billQueryData={
					pageNum:this.curentPage,
					pageSize:10,
					billNumber:"",
					enterpriseName:"",
				}
				this.$Axios({
					method:"post",
					url:this.$store.state.baseURL+"/bill/query",
					data:billQueryData
				}).then((response)=>{
					console.log(response)
				})
			},
			viewEnterpriseBill(enterpriseName){
				
			}
		}
	}
</script>

<style lang="less">
.navbar{
	&__right{
		display: flex;
		flex-direction: row;
		margin-right: @uni-spacing-col-base;
		margin-left: auto;

		&__icon{
			font-size: @uni-font-size-x-lg;
			margin-left: @uni-spacing-col-base;
			margin-right: @uni-spacing-col-base;
		}
	}
}
.bill{
	background-color: @uni-bg-color-grey;
	height: calc(100vh);
	&__card{
		display: flex;
		flex-direction: column;
		margin:@uni-spacing-row-base @uni-spacing-col-base;
		padding-bottom: @uni-spacing-row-lg;
		border-radius: @border-small;
		background-color: #fff;
		&__top{
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: @uni-spacing-row-lg;
			margin-left: @uni-spacing-col-lg;
			&__icon{
				
			}
			&__number{
				margin-left: @uni-spacing-col-base;
				font-weight: bold;
				font-size: @uni-font-size-lg;
			}
		}
		&__info{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-top: @uni-spacing-row-lg;
			margin-bottom: @uni-spacing-row-sm;
			margin-left: @uni-spacing-col-lg;
			margin-right: @uni-spacing-col-lg;
			&__name{
				color:@font-color-grey;
			}
			&__value{
				font-size: @uni-font-size-lg;
			}
		}
		&__contents{
			display: flex;
			flex-direction: column;
			margin-left: 2*@uni-spacing-col-lg;
			margin-right: @uni-spacing-col-lg;
			&__title{
				margin-top: @uni-spacing-row-lg;
				font-weight: bold;
			}
			&__list{
				display: flex;
				flex-direction: column;
				margin-top: @uni-spacing-row-base;
				padding-bottom: @uni-spacing-row-base;
				border-bottom: 0.2px solid @uni-border-color;
				&__info{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					&__name{
						color: @font-color-grey;
					}
					&__value{
						
					}
				}
				&__detail{
					margin-top: @uni-spacing-row-x-sm;
					font-size: @uni-font-size-sm;
				}
				&__amount{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					&__box{
						display: flex;
						flex-direction: column;
						align-items: center;
						// background-color: @uni-bg-color-grey;
						padding:@uni-spacing-row-base @uni-spacing-col-x-lg;
						margin-top: @uni-spacing-row-base;
						&__type{
							font-weight: bolder;
							font-size: @uni-font-size-sm;
						}
						&__value{
							margin-top: @uni-spacing-row-lg;
							font-size: @uni-font-size-lg;
							color: @color-blue;
						}
					}
				}
			}
			
		}
		&__amount{
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			margin-left: @uni-spacing-col-base;
			margin-right: @uni-spacing-col-base;
			&__box{
				display: flex;
				flex-direction: column;
				align-items: center;
				background-color: @uni-bg-color-grey;
				padding:@uni-spacing-row-base @uni-spacing-col-x-lg;
				margin-top: 2*@uni-spacing-row-lg;
				&__type{
					font-weight: bolder;
					font-size: @uni-font-size-sm;
				}
				&__value{
					margin-top: @uni-spacing-row-lg;
					font-size: @uni-font-size-lg;
					color: @color-blue;
				}
			}
		}
		&__delete{
			align-self: flex-end;
			margin-right: @uni-spacing-col-base;
			padding: 15rpx 20rpx;
			border-radius: 15rpx;
			// background-color: #f5f5f5;
			background-color: #007AFF ;
			color: #fff;
			// color: #007AFF;
			font-weight: lighter;
			font-size: @uni-font-size-lg;
		}
	}
}	

</style>
